<template>
	<div>
		<div class="addEmp">
			<el-button class="add" type="primary" @click="AddEmp">添加员工</el-button>
		</div>
		<div class="searchContainer">
			<button class="gjsx" @click="toggleSelection">高级筛选 <img src="../img/高级筛选.png"
					style="height: 15px;" /></button>
			<div class="searchInput">
				<el-input type="text" v-model="inputValue" maxlength="20" placeholder="输入姓名/电话" class="el-input" />
				<el-button type="primary" style="height: 40px; background-color: white; color: black; border: none;"
					@click="sousuo">搜索</el-button>
			</div>
		</div>
		<div class="ShaiXuan" v-if="isSelectionVisible">
			<div class="ShaiXuanForm">
				<div class="flex-container">
					<el-form-item label="角色名称" class="jsmc">
						<el-select v-model="selectedRole.role_id" clearable placeholder="请选择" style="width: 300px;">
							<el-option v-for="item in roleOptions" :key="item.role_id" :label="item.role_name"
								:value="item.role_id" />
						</el-select>
					</el-form-item>
					<div class="button-container">
						<el-button class="czbtu" @click="ChongZhi">重置</el-button>
						<el-button class="cxbtu" @click="GaoJiCha">查询</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="emplist">
			<div class="employee">
				<div class="employeeList">
					<div class="employeeItem" v-for="(employee, index) in employees" :key="index">
						<div class="header">
							<el-avatar>
								<template v-if="employee.userEntity.user_avatar">
									<el-image
										:src="'http://localhost:8089/property/download/' + employee.userEntity.user_avatar"
										style="width: 100px; height: 100px; border-radius: 50%;" />
								</template>
								<template v-else>
									<svg class="icon" viewBox="0 0 1024 1024" version="1.1"
										xmlns="http://www.w3.org/2000/svg" width="100" height="100">
										<path d="M919.35108 693.764763" fill="#98A2AD"></path>
										<path d="M705.867918 411.43356" fill="#98A2AD"></path>
										<path
											d="M933.432797 657.941883 741.689774 657.941883 741.689774 129.149429l-0.103354 0c129.517819 78.480422 216.071104 220.835617 216.071104 383.278313C957.658548 563.340295 949.27153 612.285031 933.432797 657.941883L933.432797 657.941883z"
											fill="#82BF39"></path>
										<path
											d="M919.35108 693.764763c-69.469188 157.058059-226.733954 266.494517-409.41867 266.494517-68.279083 0-132.781142-15.21861-190.550871-42.448788l0 0L319.381539 693.764763 919.35108 693.764763"
											fill="#468BCA"></path>
										<path
											d="M283.403117 502.256078l0 396.503523-0.154519 0c-87.277786-51.352575-155.505703-131.383306-192.053084-226.943732l0 0L283.403117 502.256078z"
											fill="#F0EA4D"></path>
										<path
											d="M706.901457 417.201937 347.542926 94.956675l0-0.075725c50.314942-19.566638 105.188714-30.259164 162.389484-30.259164 69.833485 0 136.922463 16.023952 195.935508 44.546565l0 308.032562L706.901457 417.200914z"
											fill="#89509B"></path>
										<path
											d="M311.513338 110.851691l179.213661 160.682609-0.102331-0.053212L78.978261 634.750695l0 0c-11.025101-39.031968-16.927531-79.898725-16.927531-122.322953 0-176.058808 101.720729-328.45673 249.357208-401.602657L311.513338 110.851691z"
											fill="#F19338"></path>
									</svg>
								</template>
							</el-avatar>
						</div>
						<div class="empms">
							<div class="ename">{{ employee.userEntity.user_name }}</div>
							<div class="ephone">{{ employee.userEntity.phone }}</div>
						</div>
						<div class="empcz">
							<div class="jsbq">
								<span class="js">{{ employee.roleEntity.role_name }}</span>
							</div>
							<div class="cz">
								<div class="eczbj" @click="updemp(employee.user_id)">编辑</div>
								<div class="eczsc" @click="deleteEmployee(employee.user_id)">删除</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="demo-pagination-block">
				<el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
					:page-sizes="[20, 30, 40, 50]" :size="size" :disabled="disabled" :background="background"
					layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref, onMounted, computed, watch } from 'vue';
	import { useRouter } from 'vue-router';
	import $http from '../router/AxiosApi';
	import { ElMessage, ElMessageBox } from 'element-plus'
	import type { ComponentSize } from 'element-plus'
	const page = ref(1)
	const pageSize = ref(12)
	const total = ref(0)
	const size = ref<ComponentSize>('default')
	const handleSizeChange = (val : number) => {
		pageSize.value = val;
		pageFount(page, pageSize, selectedRole.role_id, ss.user_name, ss.phone)
	}
	const handleCurrentChange = (val : number) => {
		page.value = val;
		pageFount(page, pageSize, selectedRole.role_id, ss.user_name, ss.phone)
	}

	const router = useRouter()
	const employees = ref([]);
	const ss = reactive({
		user_name: '',
		phone: ''
	})
	const sousuo = () => {
		pageFount(page, pageSize, selectedRole.role_id, ss.user_name, ss.phone)
	}
	const AddEmp = () => {
		router.push({ name: 'AddEmp' });
	}

	const updemp = (employeeId) => {
		console.log("user_id:", employeeId);
		router.push("UpdEmp?employeeId=" + employeeId);
	}
	const isSelectionVisible = ref(false);

	function toggleSelection() {
		isSelectionVisible.value = !isSelectionVisible.value;
	}
	let roleOptions = reactive([]);
	let selectedRole = reactive({
		role_id: ''
	});

	$http.post('RoleList').then((res) => {
		roleOptions = res.data.data;
	});
	const GaoJiCha = () => {
		pageFount(page, pageSize, selectedRole.role_id, ss.user_name, ss.phone)
	}
	const ChongZhi = () => {
		pageFount(page, pageSize, selectedRole.role_id, ss.user_name, ss.phone)
		selectedRole.role_id = null
	}

	const currentPage4 = ref(0)
	const pageSize4 = ref(0)
	const background = ref(false)
	const disabled = ref(false)

	//分页查询(页数,页面数据长度)
	const pageFount = (userpage, size, roleId, userName, userPhone) => {
		$http.post(`UserList?currentPage=${page.value}&pageSize=${size.value}`, {

			"role_id": roleId,
			"user_name": userName, "phone": userPhone

		}).then((res) => {
			employees.value = res.data.data.list; // 假设后端返回的数据结构中有一个data字段存放员工数据
			console.log(res.data.data)
			total.value = res.data.data.total
			currentPage4.value = res.data.data.pageNum
			pageSize4.value = res.data.data.pageSize
		})
	}
	pageFount(page, pageSize, selectedRole.role_id, ss.user_name, ss.phone);


	const deleteEmployee = (employeeId) => {
		ElMessageBox.confirm(
			'删除后，该员工无法查看/操作本小区',
			'确认删除员工',
			{
				confirmButtonText: '确定删除',
				cancelButtonText: '取消',
				type: 'warning',
			},

		).then(() => {
			$http.delete(`/DelUserRole/${employeeId}`).then((res) => {
				$http.delete(`/DelUser/${employeeId}`).then((res) => {
					ElMessage({
						type: 'success',
						message: '删除成功',
					})
					pageFount(page, pageSize, selectedRole.role_id, ss.user_name, ss.phone);
				})
			})

		}).catch(() => {

		})

	}
	const inputValue = ref('');

	watch(inputValue, (newValue, oldValue) => {
		if (/^\d+$/.test(newValue)) {
			// 如果新值是纯数字，且旧值不是，则认为用户正在输入电话号码  
			if (!/^\d+$/.test(oldValue)) {
				// 清理可能的用户名  
				if (ss.user_name === oldValue) {
					ss.user_name = '';
				}
				ss.phone = newValue;
			}
		} else {
			// 如果新值不是纯数字，则更新用户名  
			ss.user_name = newValue;
			// 如果电话号码字段被这个非数字值污染了，则清理它  
			if (/^\d+$/.test(ss.phone) && ss.phone === oldValue) {
				ss.phone = '';
			}
		}
	});
</script>

<style scoped>
	.addEmp {
		display: flex;
	}

	.add {
		background-color: #00c36d;
		color: white;
	}

	.demo-pagination-block {
		padding: 20px;
		position: relative;
		top: 400px;
	}

	.searchContainer {
		width: 1390px;
		margin-top: -35px;
		float: right;
		width: 500px;
		display: flex;
		justify-content: flex-end;
		position: relative;
		z-index: 999;
	}

	.gjsx {
		margin-right: 10px;
	}

	.searchInput {
		width: 300px;
		display: flex;
	}

	.searchInput .el-input {
		flex: 1;
		height: 40px;
		line-height: 40px;
		border: none;
	}

	.ShaiXuan {
		width: 1390px;
		margin-top: 20px;
	}

	.ShaiXuanForm {
		width: 1488px;
		padding: 25px;
		padding-top: 40px;
		background-color: white;
		border-radius: 10px;
	}

	.flex-container {
		display: flex;
		justify-content: space-between;
	}

	.jsmc,
	.zczt {
		flex: 1;
		margin-right: 10px;
	}

	.button-container {
		display: flex;
		position: relative;
		right: 65px;
		/* 调整这里的值来控制按钮的水平位置 */
	}

	.czbtu {
		width: 90px;
		background-color: #F5F5F5;
	}

	.cxbtu {
		width: 90px;
		background-color: #00c36d;
		color: white;
	}

	.emplist {
		margin-top: 20px;
		width: 100%;
		height: 800px;
		background-color: white;
		border-radius: 10px;
	}

	.employee {
		display: flex;
		flex-direction: column;
		width: 1300px;
		height: 300px;
		margin: 30px 22px;
	}

	.employeeList {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px;
		margin-top: 10px;
	}

	.employeeItem {
		width: calc(33.333% - 20px);
		border: 1px solid #CCC;
		border-radius: 10px;
		margin-top: 10px;
		height: 130px;
		display: flex;
		/* 使每个员工条目内部也使用 Flexbox 布局 */
		align-items: center;
		/* 垂直居中对齐 */
	}

	.header {
		width: 50px;
		height: 50px;
		margin-left: 25px;
	}

	.empms {
		flex: 1;
	}

	.empcz {
		width: 150px;
	}

	.ename {
		margin-right: 190px;
	}

	.ephone {
		margin-right: 140px;
	}

	.jsbq {
		width: 90px;
		height: 35px;
		background-color: #E5F9F0;
		color: #00C36D;
		border-radius: 4px;
		line-height: 35px;
		margin-bottom: 20px;
		margin-left: -15px;
	}

	.cz {
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;
		/* 垂直居中对齐 */

	}

	.eczbj,
	.eczsc {
		margin-right: 10px;
		/* 根据需要调整间距 */
		cursor: pointer;
		color: lightslategray;
	}
</style>